<template>
  <!-- 权限管理 -->
  <div class="config">
    <div class="config-top">
      <div class="config-top-title">配置管理</div>
      <div class="config-top-con">
        <div class="config-top-con-tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick($event)">
            <el-tab-pane v-for="item in tabList" :key="item.type" :label="item.title" :name="item.type"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="config-top-con-msg">
          <p>
            设备品牌<span style="color: #1890ff">{{ barandTotal }}</span>
          </p>
          <p style="margin-left: 54px">
            设备型号<span style="color: #00c8a9">{{ barandModel }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="config-con">
      <div class="config-con-top">
        <el-input
          v-if="activeName !== 3"
          class="config-con-top-input"
          v-model="searchValue"
          :placeholder="`请输入${placeholderVlaue[activeName]}名称进行搜索`"
          clearable
        ></el-input>
        <el-button v-if="activeName !== 3" class="config-con-top-search" @click="clickSearch">搜索</el-button>

        <el-button class="config-con-top-add" @click="clickAdd">{{
          activeName === 1 ? '新增品牌' : activeName === 2 ? '新增型号' : '新增状态'
        }}</el-button>
      </div>
      <div class="config-con-main" v-if="activeName !== 3">
        <comTable
          :loading="loading"
          :tableData="tableData"
          :listCount="total"
          :pageSize="pageSize"
          :currentPage="currentPage"
          :userColumn="tableColumns()"
          @updatePage="handleCurrentChange"
          @sizePage="handleSizeChange"
        >
          <template #id>
            <el-table-column label="序号" minWidth="80">
              <template #default="scope">
                <span style="color: #4c96ff; cursor: pointer" class="table-idx" @click="clickIdx(scope.row)">
                  {{ scope.row.id }}
                </span>
              </template>
            </el-table-column>
          </template>
          <template #name>
            <el-table-column :label="`${placeholderVlaue[activeName]}名称`" minWidth="80">
              <template #default="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
          </template>
          <template #action>
            <el-table-column label="操作" minWidth="80">
              <template #default="scope">
                <span style="color: #1182fb; padding: 0 10px; cursor: pointer" @click="clickDetail(scope.row)"
                  >编辑</span
                >
                <span style="color: #ff2a00; padding: 0 10px; cursor: pointer" @click="clickDelete(scope.row)"
                  >删除</span
                >
              </template>
            </el-table-column>
          </template>
        </comTable>
      </div>
      <div class="config-con-main" v-if="activeName === 3">
        <comTable
          :loading="loading"
          :tableData="tableData"
          :listCount="total"
          :pageSize="pageSize"
          :currentPage="currentPage"
          :userColumn="tableColumns()"
          @updatePage="handleCurrentChange"
          @sizePage="handleSizeChange"
        >
          <template #id>
            <el-table-column label="序号" minWidth="80">
              <template #default="scope">
                <span style="color: #4c96ff; cursor: pointer" class="table-idx" @click="clickIdx(scope.row)">
                  {{ scope.row.id }}
                </span>
              </template>
            </el-table-column>
          </template>
          <template #key>
            <el-table-column :label="`${placeholderVlaue[activeName]}名称`" minWidth="80">
              <template #default="scope">
                <p class="table-state">
                  <span
                    :style="
                      scope.row.value === 0
                        ? 'background: #2fb083;'
                        : scope.row.value === -1
                        ? 'background: #FF2A00;'
                        : scope.row.value === -2
                        ? 'background: #E8AF27;'
                        : 'background: #4F698C;'
                    "
                  ></span>
                  <i
                    :style="
                      scope.row.value === 0
                        ? 'color: #2fb083;'
                        : scope.row.value === -1
                        ? 'color: #FF2A00;'
                        : scope.row.value === -2
                        ? 'color: #E8AF27;'
                        : 'color: #4F698C;'
                    "
                    >{{ scope.row.key }}</i
                  >
                </p>
              </template>
            </el-table-column>
          </template>
          <template #action>
            <el-table-column label="操作" minWidth="80">
              <template #default="scope">
                <span style="color: #1182fb; padding: 0 10px; cursor: pointer" @click="clickDetail(scope.row)"
                  >编辑</span
                >
                <span style="color: #ff2a00; padding: 0 10px; cursor: pointer" @click="clickDelete(scope.row)"
                  >删除</span
                >
              </template>
            </el-table-column>
          </template>
        </comTable>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="25%" :modal="false" draggable>
      <div class="dialog-con" v-if="activeName === 1">
        <div class="dialog-con-item">
          <p>品牌名称</p>
          <el-input v-model="formAdd.form.barandName" placeholder="请输入品牌名" clearable></el-input>
        </div>
      </div>
      <div class="dialog-con" v-if="activeName === 2">
        <div class="dialog-con-item">
          <p>品牌名称</p>
          <el-select
            v-model="formAdd.form.brand"
            @change="formAdd.changeBrand($event)"
            class="dialog-con-item-select"
            placeholder="请选择品牌"
          >
            <el-option v-for="(item, index) in brandList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="dialog-con-item">
          <p>型号名称</p>
          <el-input v-model="formAdd.form.modelName" placeholder="请输入型号名称" clearable></el-input>
        </div>
      </div>
      <div class="dialog-con" v-if="activeName === 3">
        <div class="dialog-con-item">
          <p>状态名称</p>
          <el-input v-model="formAdd.form.statusName" placeholder="请输入状态名称" clearable></el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="clickCancel">取消</el-button>
          <el-button type="primary" @click="clickConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 删除确认 -->
    <div class="delete">
      <el-dialog v-model="deleteVisible" width="20%" :modal="false" draggable>
        <span>删除之后要无法撤销，确定要删除吗？ </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteVisible = false" style="margin-right: 20px">取消</el-button>
            <el-button type="primary" @click="deleteConfirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import comTable from '@/components/comTable/index.vue';
import manageApi from '@/api/manage.ts';

const activeName = ref(1);
const tabList = ref([
  {
    title: '设备品牌',
    type: 1,
  },
  {
    title: '设备型号',
    type: 2,
  },
  {
    title: '设备状态',
    type: 3,
  },
]);
const placeholderVlaue = ref(['', '品牌', '型号', '状态']);
const searchValue = ref('');
const tableData = ref([{serial_no: 1, name: '深圳飞马机器人'}]);
const loading = ref(false);
const total = ref(0);
const pageSize = ref(0);
const currentPage = ref(1);
const brandList = ref([]); // 设备品牌下拉
const barandTotal = ref(); // 设备品牌总量
const barandModel = ref(); // 设备型号总量
const dialogVisible = ref(false);
const dialogTitle = ref('');
const formAdd = reactive({
  form: {barand: '', barandName: '', modelName: '', statusName: ''},
  changeBrand(val) {
    formAdd.form.barand = val;
  },
});
const id = ref<number>();
const deleteVisible = ref(false);

// 切换tabs
const handleClick = (event: any) => {
  activeName.value = event.props.name;
  searchValue.value = '';
  getTableData(activeName.value, {page: 1});
};
// 查询
const clickSearch = () => {
  getTableData(activeName.value, {keyword: searchValue.value, page: 1});
};
// 新增
const clickAdd = () => {
  dialogVisible.value = !dialogVisible.value;
  getBrandList();
  switch (activeName.value) {
    case 1:
      dialogTitle.value = '新增设备品牌';
      break;
    case 2:
      dialogTitle.value = '新增设备型号';
      break;
    case 3:
      dialogTitle.value = '新增设备状态';
      break;
    default:
      break;
  }
};
// 详情
const clickDetail = (item: any) => {
  switch (activeName.value) {
    case 1:
      formAdd.form.barandName = item.name;
      break;
    case 2:
      formAdd.form.barand = item.brand_id;
      formAdd.form.modelName = item.name;
      break;
    case 3:
      formAdd.form.statusName = item.key;
      break;
    default:
      break;
  }
  dialogVisible.value = !dialogVisible.value;
  dialogTitle.value = '编辑';
};
// 删除
const clickDelete = (item: any) => {
  id.value = item.id;
  deleteVisible.value = !deleteVisible.value;
};
const deleteConfirm = () => {
  switch (activeName.value) {
    case 1:
      manageApi
        .permissionBrandDelete({id: id.value})
        .then((res) => {
          if (res.status === 0) {
            ElMessage.success(res.message);
            getTableData(activeName.value);
            deleteVisible.value = !deleteVisible.value;
          }
        })
        .catch((err) => {
          throw err;
        });
      break;
    case 2:
      manageApi
        .permissionModelDelete({id: id.value})
        .then((res) => {
          if (res.status === 0) {
            ElMessage.success(res.message);
            getTableData(activeName.value);
            deleteVisible.value = !deleteVisible.value;
          }
        })
        .catch((err) => {
          throw err;
        });
      break;
    case 3:
      manageApi
        .permissionStateDelete({id: id.value})
        .then((res) => {
          if (res.status === 0) {
            ElMessage.success(res.message);
            getTableData(activeName.value);
            deleteVisible.value = !deleteVisible.value;
          }
        })
        .catch((err) => {
          throw err;
        });
      break;
    default:
      break;
  }
};

// 取消
const clickCancel = () => {
  dialogVisible.value = !dialogVisible.value;
  formAdd.form = {barand: '', barandName: '', modelName: '', statusName: ''};
};

// 保存
const clickConfirm = () => {
  dialogVisible.value = !dialogVisible.value;
  switch (activeName.value) {
    case 1:
      manageApi
        .permissionBrandSave({name: formAdd.form.barandName})
        .then((res) => {
          if (res.status === 0) {
            ElMessage.success(res.message);

            getDeviceTotal();
            getTableData(activeName.value);
          }
        })
        .catch((err) => {
          throw err;
        });
      break;
    case 2:
      manageApi
        .permissionModelSave({name: formAdd.form.modelName, brand_id: formAdd.form.brand})
        .then((res) => {
          if (res.status === 0) {
            ElMessage.success(res.message);

            getDeviceTotal();
            getTableData(activeName.value);
          }
        })
        .catch((err) => {
          throw err;
        });
      break;
    case 3:
      manageApi
        .permissionStateSave({key: formAdd.form.statusName})
        .then((res) => {
          if (res.status === 0) {
            ElMessage.success(res.message);
            getDeviceTotal();
            getTableData(activeName.value);
          }
        })
        .catch((err) => {
          throw err;
        });
      break;
    default:
      break;
  }
};

// 翻页
const handleSizeChange = (e: any) => {
  pageSize.value = e.pageSize;
  getTableData(activeName.value, {per_page: pageSize.value, keyword: searchValue.value});
};
const handleCurrentChange = (e: any) => {
  currentPage.value = e.currentPage;
  getTableData(activeName.value, {page: currentPage.value, per_page: pageSize.value, keyword: searchValue.value});
};

// 获取设备品牌列表
const getBrandList = () => {
  manageApi
    .deviceBrandList()
    .then((res) => {
      brandList.value = res.data;
    })
    .catch((err) => {
      throw err;
    });
};
// 获取设备品牌型号总数

const getDeviceTotal = async () => {
  const res = await manageApi.permissionBrandList();
  const data = await manageApi.permissionModelList();
  barandTotal.value = res.data.total;
  barandModel.value = data.data.total;
};

// 获取设备表格数据
const getTableData = async (index, params) => {
  let res;
  switch (index) {
    case 1:
      loading.value = true;
      res = await manageApi.permissionBrandList(params);
      tableData.value = res.data.data;
      total.value = res.data.total;
      pageSize.value = res.data.per_page;
      currentPage.value = res.data.current_page;
      loading.value = false;
      break;
    case 2:
      loading.value = true;
      res = await manageApi.permissionModelList(params);
      tableData.value = res.data.data;
      total.value = res.data.total;
      pageSize.value = res.data.per_page;
      currentPage.value = res.data.current_page;

      loading.value = false;
      break;
    case 3:
      loading.value = true;
      res = await manageApi.permissionStateList(params);
      tableData.value = res.data.data;
      total.value = res.data.total;
      pageSize.value = res.data.per_page;
      currentPage.value = res.data.current_page;
      loading.value = false;
      break;
    default:
      break;
  }
};
onMounted(() => {
  getBrandList();
  getDeviceTotal();
  getTableData(activeName.value);
});
// 表格表头
// eslint-disable-next-line consistent-return
const tableColumns = () => {
  switch (activeName.value) {
    case 1:
      return [
        {
          prop: 'id',
          label: '序号',
          slot: 'id',
        },
        {
          prop: 'name',
          label: '品牌名称',
          slot: 'name',
        },

        {
          prop: 'action',
          label: '操作',
          slot: 'action',
        },
      ];
      // eslint-disable-next-line no-unreachable
      break;
    case 2:
      return [
        {
          prop: 'id',
          label: '序号',
          slot: 'id',
        },
        {
          prop: 'brand_name',
          label: '品牌名称',
          minWidth: 100,
        },
        {
          prop: 'name',
          label: '型号名称',
          slot: 'name',
        },

        {
          prop: 'action',
          label: '操作',
          slot: 'action',
        },
      ];
      // eslint-disable-next-line no-unreachable
      break;
    case 3:
      return [
        {
          prop: 'id',
          label: '序号',
          slot: 'id',
        },
        {
          prop: 'key',
          label: '状态名称',
          slot: 'key',
        },

        {
          prop: 'action',
          label: '操作',
          slot: 'action',
        },
      ];
      // eslint-disable-next-line no-unreachable
      break;
    default:
      break;
  }
};
</script>
<style lang="scss" scoped>
.config {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  padding-left: 29px;
  padding-top: 20px;
  box-sizing: border-box;
  &-top {
    width: 100%;
    height: 147px;
    background: #fff;
    overflow: hidden;
    &-title {
      margin: 20px 0 20px 30px;
      height: 28px;
      font-size: 18px;
      color: #999999;
      line-height: 28px;
    }
    &-con {
      display: flex;
      padding: 0 29px;
      display: flex;
      &-tabs {
        flex: 1;
        &:deep(.el-tabs__nav-wrap) {
          &::after {
            position: static !important;
          }
        }
        &:deep(.el-tabs__item) {
          color: #333333;
        }
        &:deep(.is-active) {
          color: #1182fb;
          font-weight: bold;
          font-size: 18px;
        }
        &:deep(.el-tabs__active-bar) {
          background: #1182fb;
          height: 4px;
        }
      }
      &-msg {
        display: flex;
        margin-right: 88px;
        p {
          color: #999999;
          font-size: 13px;
          margin: 0;
        }
        span {
          padding-left: 12px;
          font-size: 34px;
        }
      }
    }
  }
  &-con {
    width: 100%;
    height: 80%;
    margin-top: 14px;
    background: #fff;
    box-sizing: border-box;
    padding: 0 30px;
    padding-top: 30px;
    &-top {
      display: flex;
      justify-content: end;
      align-items: center;
      .el-button {
        margin: 0;
      }
      &-input {
        width: 310px;
        height: 36px;
        background: #ffffff;
        border-radius: 2px;
        .el-input__inner {
          &:focus {
            border: 0;
          }
        }
      }
      &-search {
        width: 86px;
        height: 36px;
        background: #1890ff;
        border-radius: 0px 2px 2px 0px;
        color: #fff;
        margin-right: 20px !important;
      }
      &-add {
        width: 98px;
        height: 36px;
        border-radius: 2px;
        border: 1px solid #1890ff;
        color: #1890ff;
      }
    }
    &-main {
      margin-top: 30px;
      height: 88%;
      .table-state {
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          width: 4px;
          height: 4px;
          border-radius: 100%;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        }
        i {
          font-style: normal;
          margin: 0 12px;
        }
      }
    }
  }
  .dialog-con {
    &-item {
      display: flex;
      align-items: center;
      > p {
        width: 120px;
        text-align: right;
        margin-right: 50px;
      }
      &:deep(.el-select .el-input) {
        width: 280px;
        height: 28px;
        &:deep(.el-input__inner) {
          height: 28px !important;
        }
      }
      &:deep(.el-input) {
        width: 280px;
        height: 28px;
      }
    }
  }
  .delete {
    &:deep(.el-dialog__body) {
      padding: 24px !important;
    }
  }
}
</style>
